{% extends "::base.html.twig" %}

{% block title %}Quizz: {{quizz.titre}}{% endblock %}

{% block other %}
<h1>Gérer les Questions</h1>
{% endblock %}
{% block bodyplus %}  style="position:relative; top:-10px;" {% endblock %}
{% block body %}
<div id="info"><i class="icon-info2 tooltips round black"  title="Pour gérer les choix possibles d'une question, cliquez sur son titre <br/> Les choix a 0 sont comptés comme faux."></i></div>
<h4 style="text-align:left; padding-left: 48px; font-size: 11pt; font-weight: normal;">
	<a href="{{ path('readAllQuizz') }}">Les Quizz</a> > {{quizz.titre}}
 	<i style="float:right;margin-right: 48px; font-weight: lighter; font-size:13pt; margin-top: -3px;">
 		Promotion {{quizz.promotion.code}}
 	</i>
 </h4>
<a href="{{path('createQuestion',{id:quizz.id})}}" class="add"><i class="icon-plus blue"></i>Ajouter une question</a>
<ul id="questions">
    {% for item in question %}
	    <li data-id="{{item.id}}" class="notActive">
			<i class="icon-arrow-down2" style="margin-left:5px; margin-right:10px;"></i>
	    	{{ item.Question }} 
	    	<a href="{{path('deleteQuestion',{id:item.id}) }}"><i class="icon-remove round red tooltips" title="Supprimer"></i></a>
	    	<a href="{{path('updateQuestion',{idQuestion:item.id}) }}"><i class="icon-pencil round tooltips" title="Editer"></i></a>
	    </li>
		<div class="choix" id="choix{{item.id}}" data-id="{{item.id}}">
			{% if choix[item.id] is defined %}
		    	{% for c in choix[item.id] %}
		    		<div>
		    			<p class="data">{{c.libelle}} | {{c.points}}</p>
		    			<p class="input" data-id="{{c.id}}">
		    				<a href="" class="annul" title="Annuler">
		    					<i class="icon-reply round tooltips" style="display:inline-block; color:#4288C1;margin:10pt; margin-left: 10px; font-size:13pt; margin-top:0;"></i>
		    				</a>
		    				<input type="text" value="{{c.libelle}}" placeholder="Libellé" class="libelle"> - 
		    				<input type="text" value="{{c.points}}" placeholder="Points" class="points">
		    				<a href="" class="update">
		    					<i class="icon-checkmark round tooltips" title="Editer" style="display:inline-block; color:#4288C1;margin:10px;margin-top:0;"></i>
		    				</a>
		    				<a href="" class="delete">
		    					<i class="icon-remove round red tooltips" title="Supprimer" style="display:inline-block; color:#4288C1;margin:10px; margin-left: 0; margin-top:0;"></i>
		    				</a>
		    				<img src="{{asset('bundles/img/loader.gif')}}" style="display:none;height:100%; float:right;"/>
		    			</p>
		    		</div>
		    	{% endfor %}
	    	{% endif %}
	    	<a href="#" class="add">Ajouter un Choix</a>
		</div>
    {% else %}
	    <li>Il n'y a aucune question dans ce quizz</li>
    {% endfor %}
</ul>
<script>
	jQuery(document).ready(function($) {
		$('.tooltips').tooltipster({
			animation: 'fade',
            contentAsHTML:true,
			theme: 'tooltipster-perso',
			delay:0
		}); 
		// Pour annulation
		var oldpts;
		var oldlib;
		// Empecher le clique multiple
		var chargement=false;

		var oldActive=null;
		/* ----- Afficher les choix de la question ----- */
		$("#questions").on("click","li",function(){
			elem=$(this);
			if(elem.attr("class")=="notActive"){
				if(typeof ($(".activeChoix").attr("class"))!="undefined"){
					$(".activeChoix").slideUp(500,function(){
						$(this).removeClass("activeChoix");
					});
					if(oldActive!=null){
						oldActive.removeClass('active').addClass('notActive').find(".icon-arrow-up2").attr("class","icon-arrow-down2");
					}
				}
				$("#choix"+elem.attr("data-id")).slideDown().addClass("activeChoix");
				elem.addClass("active").removeClass("notActive");
				oldActive=elem;
				elem.find(".icon-arrow-down2").attr("class","icon-arrow-up2");
			}else {
				$("#choix"+elem.attr("data-id")).slideUp().removeClass('activeChoix');
				elem.removeClass('active').addClass('notActive');
				oldActive=null;
				elem.find(".icon-arrow-up2").attr("class","icon-arrow-down2");
			}
		});

		/* ------ Clique sur un choix ------ */
		$(".choix").on('click','div .data',function(){
			/* ------ Si pas déjà de choix en modif ------ */
			if(typeof($(".choix .modify").attr("class"))=='undefined'){
				elem=$(this).parent();

		/* ------ Cache le choix et affiche la modif ------ */
				elem.find(".data").hide();
				elem.find(".input").show();
				elem.addClass("modify");

				elem=$(this);
				p=elem.parent();

				oldpts=p.find(".points").val();
				oldlib=p.find(".libelle").val();
				p.find(".libelle").focus();
			}
		});
		$(".choix .add").click(function(){
		/* ------ Nouveau choix ------ */
			if(typeof($(".choix .modify").attr("class"))=='undefined'){
				$(this).before('<div class="modify"><p class="data" style="display:none;"></p><p class="input new" data-id="" style="display:block;"><a href="" class="annul" title="Annuler"><i class="icon-reply round" style="display:inline-block; color:#4288C1;margin:10pt; margin-left: 10px; margin-bottom:0; font-size:13pt; margin-top:0; margin-bottom: 0;"></i></a><input type="text" value=""  placeholder="Libellé" class="libelle"> - <input type="text" value="" placeholder="Points" class="points"><a href="" class="update"><i class="icon-checkmark round tooltips" title="Editer" style="display:inline-block; color:#4288C1;margin:10px; margin-bottom: 0;margin-top:0;"></i></a><a href="" class="delete" style="display:none;"><i class="icon-remove round tooltips red" title="Supprimer" style="display:inline-block; color:#4288C1;margin-right:10pt;"></i></a><img src="{{asset('bundles/img/loader.gif')}}" style="display:none; float:right;"/></p></div>');
				$(".modify .libelle").focus();
			}
		});
		/* ------ Clique sur entrée : lance le formulaire ------ */
		$(".choix").on("keypress",".input input",function(e){
			if(e.which==13){
				$(this).parent().find(".update").click();
			} else if(e.key=="Esc"){
				$(this).parent().find(".annul").click();
			}
		});


		$(".choix").on('click',".input a",function(e){
			e.preventDefault();
			if(!chargement){
				chargement=true;
				var elem=$(this);
				var p=elem.parent();
				var p2=p.parent();

				var pts=p.find(".points").val();
				var lib=p.find(".libelle").val();
				/* ------ Si le bouton est le bouton "valider" ------ */
				if(elem.attr("class")=="update"){
					/* ----- Icone de chargement ----- */
					p.find("img").show();
					if( lib && typeof(lib)!='undefined' && lib!="" && lib!=" " && lib!="  "){
						if(/^(\d+)?$/.test(pts) && pts!="" && pts !=" " && typeof(pts)!="undefined"){
								/* ------ Si c'est un nouveau ------ */
								if(p.attr('class').match("new")){
									p.removeClass("new");
									$.ajax({
										url: '{{path("createChoix")}}',
										type: 'POST',
										data: {
											id: p2.parent().attr("data-id"),
											libelle:p2.find(".libelle").val(),
											points:p2.find(".points").val()
										},
										success:function(data){
											if(data.match("Erreur")){
												Popup(data);
											} else {
												p.attr("data-id",data);
												p.parent().find(".data").html(p2.find(".input .libelle").val()+" | "+p2.find(".input .points").val());
											}
											p.parent().find(".data").show();
											p.parent().find(".input").hide()
											p2.find(".input").find(".delete").show();
											p.parent().removeClass("modify");
											p.find("img").hide();
										},
										error:function(){
											Popup("Erreur, contactez l'administrateur pour plus d'informations");
										},
										complete:function(){
											p.parent().find(".data").show();
											p.parent().find(".input").hide()
											p2.find(".input").find(".delete").show();
											p.parent().removeClass("modify");
											p.find("img").hide();
											chargement=false;
										}
									});
								}else {
									/* ------ Si c'est un update ------ */
									$.ajax({
										url: '{{path("updateChoix")}}',
										type: 'POST',
										data: {
											id: p.attr("data-id"),
											libelle:p2.find(".libelle").val(),
											points:p2.find(".points").val()
										},
										success:function(data){
											chargement=false;
											if(data.match("Erreur")){
												Popup(data);
											} else {
												p.parent().find(".data").html(p2.find(".input .libelle").val()+" | "+p2.find(".input .points").val());
											}
											p.parent().find(".data").show();
											p.parent().find(".input").hide()
											p2.find(".input").find(".delete").show();
											p.parent().removeClass("modify");
											p.find("img").hide();
										},
										error:function(){
											Popup("Erreur, contactez l'administrateur pour plus d'informations");
										},
										complete:function(){
											p.parent().find(".data").show();
											p.parent().find(".input").hide()
											p2.find(".input").find(".delete").show();
											p.parent().removeClass("modify");
											p.find("img").hide();
											chargement=false;
										}
									});
								}
						}else {
							Popup('Les points sont vides ou non numériques, verifiez avant de valider');
								p.find(".points").focus();
								p.find("img").hide();
								chargement=false;
						}
					}else {
						Popup('Le libellé est vide, verifiez avant de valider');
						p.find(".libelle").focus();
						chargement=false;
						p.find("img").hide();
					}
				}else if(elem.attr("class")=="delete"){
					p.find("img").show();
					/* ------ Pour delete ------ */
					$.ajax({
						url: '{{path('deleteChoix')}}',
						type: 'POST',
						data: {id:p.attr('data-id')},
						success:function(data){
							if(data.match("Erreur")){
								Popup(data);
							} else {
								p.parent().fadeOut(500,function(){
									p.parent().removeClass("modify");
								});
							}
							p.find("img").hide();
						},
						error:function(){
								Popup("Erreur, contactez l'administrateur pour plus d'informations");
						},
						complete:function(){
							chargement=false;
						}
					});
					
				}else if(elem.attr("class")=="annul"){
					chargement=false;
					/* ----- Bouton Annuler ou Echap ----- */ 
					p.parent().find(".data").show();
					p.parent().find(".input").hide()
					p2.find(".input").find(".delete").show();
					p.parent().removeClass("modify");

					// Remet les valeur de Bases
					p.find(".points").val(oldpts);
					p.find(".libelle").val(oldlib);

					// Eviter le choix vide
					if(p.attr('class').match("new")){
						p2.remove();
					}
				}
			}
		});

		/* ------ Petite fonction de Popup d'erreurs ------ */
		function Popup(str){
			/* ------ Random l'id pour eviter les pb si pls popup ------ */
			var rd=Math.floor((Math.random() * 10000000000) + 1);
			var errorid="error"+rd.toString();
			$("body").prepend('<div id="'+errorid+'" style="text-align:center; display:none; z-index:50000; width:100%; padding:10px; background-color: red;color:white;font-weight:bold;position:fixed; left:0; top:0;">'+str+'</div>');

			$("#"+errorid).slideDown('500', function() {
				var tmp=$(this);
				setTimeout(function(){
					tmp.slideUp(500,function(){
						$(this).remove();
					});
				},2000)
			});
		}

	});
</script>
{% endblock %}